<template>
  <div class="myPanel">
    <el-dialog
      title="新增员工"
      @open="openDig"
      :visible="showDialog"
      @close="cancel"
    >
      <el-form :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username" placeholder="1-30个字符"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号">
          </el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker
            v-model="form.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="form.formOfEmployment" placeholder="请选择">
            <el-option
              v-for="item in hireType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="form.workNumber" placeholder="1-20个字符">
          </el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <div class="box">
            <el-input
              v-model="form.departmentName"
              @focus="inputFocus"
            ></el-input>
            <el-tree
              v-show="treeShow"
              default-expand-all
              class="mytree"
              :data="list"
              :props="{ label: 'name' }"
              @node-click="nodeClick"
            ></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker
            v-model="form.correctionTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myEmployees from '@/api/constant/employees.js'
import { getDepartmentsApi } from '@/api/departments.js'
import { addEmployeesApi } from '@/api/employees.js'
export default {
  props: ['showDialog'],
  data () {
    return {
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      rules: {
        username: [{ required: true, message: '必填', trigger: 'blur' }],
        mobile: [
          { required: true, message: '必填', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value)
                ? callback()
                : callback(new Error('手机号格式不正确'))
            },
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        workNumber: [{ required: true, message: '必填', trigger: 'blur' }],
        departmentName: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        timeOfEntry: [{ required: true, message: '必填', trigger: 'blur' }],
        correctionTime: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      hireType: myEmployees.hireType,
      list: [],
      treeShow: false
    }
  },
  methods: {
    cancel () {
      this.$emit('update:showDialog', false)
      this.form = {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      }
    },
    async getDepartments () {
      const res = await getDepartmentsApi()
      this.list = this.turnData(res.data.depts, '')
    },
    // 打开弹框
    openDig () {
      this.getDepartments()
    },
    // 转换数据
    turnData (arr, pid) {
      const newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    },
    // 节点点击
    nodeClick (data) {
      // console.log(data);
      this.form.departmentName = data.name
      this.treeShow = false
    },
    // input框获得焦点
    inputFocus () {
      this.treeShow = true
    },
    // 提交数据
    async submit() {
       try {
           await addEmployeesApi(this.form)
           // 关闭弹框
           this.$emit('update:showDialog',false)
           this.$message.success('新增成功')
           // 调用父组件方法，刷新页面
           this.$parent.getEmployeesList()
       } catch (error) {
           console.log(error);
       }
    }
  }
}
</script>

<style lang="scss">
.myPanel {
  .box {
    position: relative;
    width: 300px;

    .mytree {
      position: absolute;
      width: 100%;
      height: 200px;
      overflow-y: scroll;
      z-index: 99;
      top: 47px;
      left: 0;
      border: 1px solid #ddd;

      .el-icon-caret-right {
        display: none;
      }

      .el-tree-node__label {
        margin-left: 10px;
      }
    }
  }
}
</style>
